<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>IoT平台认证系统</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div class="container">
    <h1>IoT平台认证系统</h1>
    
    <!-- 登录页面 -->
    <div id="login-page" class="page">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">用户登录</h2>
        </div>
        <form id="loginForm" onsubmit="onLogin(event)">
          <div class="form-group">
            <label>用户名</label>
            <input name="username" required autocomplete="username" />
          </div>
          <div class="form-group">
            <label>密码</label>
            <input name="password" type="password" required autocomplete="current-password" />
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" name="rememberMe" id="rememberMe" />
              记住密码
            </label>
          </div>
          <button type="submit">登录</button>
          <button type="button" class="secondary" onclick="showRegisterForm()">注册账户</button>
        </form>
        
        <form id="registerForm" class="hidden" onsubmit="onRegister(event)">
          <div class="form-group">
            <label>用户名</label>
            <input name="username" required autocomplete="username" />
          </div>
          <div class="form-group">
            <label>密码</label>
            <input name="password" type="password" required autocomplete="new-password" />
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input name="email" type="email" autocomplete="email" />
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input name="phone" autocomplete="tel" />
          </div>
          <div class="form-group">
            <label>姓名</label>
            <input name="name" autocomplete="name" />
          </div>
          <button type="submit">注册</button>
          <button type="button" class="secondary" onclick="showLoginForm()">返回登录</button>
        </form>
        
        <pre id="loginResult"></pre>
      </div>
    </div>
  </div>

  <script src="js/utils.js"></script>
  <script src="js/login.js"></script>
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化调试面板
      initDebugPanel();
      
      // 检查是否有保存的token
      const token = loadToken();
      if (token) {
        // 尝试获取用户信息
        request(api.me).then(resp => {
          if (resp.ok && resp.data && resp.data.success) {
            const user = resp.data.data;
            // 根据角色重定向到相应页面
            if (user.role === 'ADMIN') {
              window.location.href = 'admin-dashboard.html';
            } else {
              window.location.href = 'user-dashboard.html';
            }
          } else {
            // Token无效，清除
            clearToken();
          }
        }).catch(() => {
          // 请求失败，清除token
          clearToken();
        });
      }
    });
    
    // 修改登录响应显示
    function showLoginDebugInfo(type, data) {
      // 由于我们现在使用统一的调试面板，这里不再需要单独显示调试信息
    }
  </script>
</body>
</html>